<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="eui" label="EUI" width="180">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="180">
            </el-table-column>
            <el-table-column prop="nums" label="传感器通道">
            </el-table-column>
            <el-table-column prop="devGroup" label="设备群组">
            </el-table-column>
            <el-table-column prop="loop" label="上报周期(分钟)">
            </el-table-column>
            <el-table-column prop="mhz" label="频率(MHz)">
            </el-table-column>
            <el-table-column label="在线状态">
                <template #default="scope">
                    {{ scope.row.online ? '在线' : '离线' }}
                </template>
            </el-table-column>
            <el-table-column label="绑定时间">
                <template #default="scope">
                    {{ getTime(scope.row.bTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link   @click="handleClick(scope.row)" type="text" size="small">移动</el-button>
                    <el-button link   type="text" size="small">数据</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page_box">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageObj.currPage" :page-sizes="[3, 5, 10, 15]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
// import FillterMixin from "@/mixins/FillterMixin"
// import PageFnMixin from "@/mixins/PageFnMixin"
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: 'SensorTable',
    props: ['tableData', 'pageObj', 'total', 'getData'],
    // mixins: [FillterMixin,PageFnMixin],
    setup(props) {
        const pageSize: any = ref(props.pageObj.pageSize)

        /* ======方法====== */
        function handleClick(row: any) {
            
            console.log(props.pageObj);
        }
        function handleSizeChange(size: number) {
            pageSize.value = size
            props.getData({ pageSize: size, currPage: 1 })
            // this.$parent.pageObj.pageSize = size;
            // this.$parent.pageObj.currPage = 1;
            // this.$parent.getData();
        }
        // 当前页
        function handleCurrentChange(page: number) {
            props.getData({ pageSize: pageSize.value, currPage: page })
            // this.$parent.pageObj.currPage = page;
            // this.$parent.getData();
        }
        // 时间
        const getTime = (value: any) => {
            let date = new Date(value)
            let year = date.getFullYear();
            let month = ("0" + (date.getMonth() + 1)).slice(-2);
            let day = ("0" + date.getDate()).slice(-2);
            let formattedDate = year + "-" + month + "-" + day;
            return formattedDate
        }
        return { handleClick, handleSizeChange, handleCurrentChange , getTime , pageSize }
    }
    // methods: {
    //     handleClick() {
    //         // console.log(111);
    //     }
    // },
});
</script>

<style lang="less" scoped>
.page_box {
    text-align: center;
    background: #fff;
    padding: 10px 0;
}
</style>